<template>
  <div class="w-full h-full">
    <section
      class="header flex items-center justify-around"
    >
      <div class="title"> 授权流程 </div>
      <div
        class="text-center"
        @click="
          linkToPage(
            '/authManageCatalog/authorizationManage'
          )
        "
      >
        <img
          class="icon cursor-pointer"
          src="@/assets/imgs/home/auth-icon.png"
          alt=""
        />
        <span>授权管理</span>
      </div>
      <img
        class="header-arrow"
        src="@/assets/imgs/home/headerarrow-icon.png"
        alt=""
      />
      <div
        class="text-center"
        @click="
          linkToPage(
            '/authManageCatalog/authorizationManage'
          )
        "
      >
        <img
          class="icon cursor-pointer"
          src="@/assets/imgs/home/account-icon.png"
          alt=""
        />
        <span>账号授权</span>
      </div>
      <img
        class="header-arrow"
        src="@/assets/imgs/home/headerarrow-icon.png"
        alt=""
      />
      <div
        class="text-center"
        @click="
          linkToPage(
            '/authManageCatalog/authorizationManage'
          )
        "
      >
        <img
          class="icon cursor-pointer"
          src="@/assets/imgs/home/datashare-icon.png"
          alt=""
        />
        <span>数据共享</span>
      </div>
      <img
        class="header-arrow"
        src="@/assets/imgs/home/headerdotarrow-icon.png"
        alt=""
      />
      <div class="text-center" @click="openCopyBoard">
        <img
          class="icon cursor-pointer"
          src="@/assets/imgs/home/viewcode-icon.png"
          alt=""
        />
        <span>查看授权码</span>
      </div>
    </section>
    <div class="h-84px">
      <img
        class="connection-arrow"
        src="@/assets/imgs/home/connectionarrow-icon.png"
        alt=""
      />
    </div>
    <div
      class="flex h-[calc(100%-230px)] flex-1 min-h-556px"
    >
      <section
        class="side flex justify-around flex-col items-center"
      >
        <div class="title"> 供应商销售数据 </div>
        <div
          class="text-center"
          @click="linkToPage('/salesManage/salesPlan')"
        >
          <img
            class="icon cursor-pointer"
            src="@/assets/imgs/home/saleplan-icon.png"
            alt=""
          />
          <span>供应商销售计划</span>
        </div>
        <img
          class="side-arrow"
          src="@/assets/imgs/home/sidearrow-icon.png"
          alt=""
        />
        <div
          class="text-center"
          @click="linkToPage('/salesManage/salesPlan')"
        >
          <img
            class="icon cursor-pointer"
            src="@/assets/imgs/home/qrcode-icon.png"
            alt=""
          />
          <span>接单二维码</span>
        </div>
        <img
          class="side-arrow"
          src="@/assets/imgs/home/sidearrow-icon.png"
          alt=""
        />
        <div
          class="text-center"
          @click="linkToPage('/salesManage/salesManage')"
        >
          <img
            class="icon cursor-pointer"
            src="@/assets/imgs/home/approval-icon.png"
            alt=""
          />
          <span>运单审核</span>
        </div>
        <img
          class="side-arrow"
          src="@/assets/imgs/home/sidearrow-icon.png"
          alt=""
        />
        <div
          class="text-center"
          @click="linkToPage('/salesManage/salesManage')"
        >
          <img
            class="icon cursor-pointer"
            src="@/assets/imgs/home/viewwaybill-icon.png"
            alt=""
          />
          <span>查看运单</span>
        </div>
      </section>
      <div
        class="min-w-90px flex justify-center items-center mb-112px"
      >
        <img
          class="short-arrow"
          src="@/assets/imgs/home/shortarrow-icon.png"
          alt=""
        />
      </div>
      <section class="main flex-1">
        <div class="title"> 采销一码通 </div>
        <div class="help-box">
          <img src="@/assets/imgs/tip-help.png" alt="" />
          当供应商使用神煤交易系统，可进行一码通配置，配置后司机装完货之后自动生成采购运单，后续还会提供相关采销报表等功能
        </div>
        <div class="flex justify-around">
          <div
            class="flex flex-col justify-center items-center"
            @click="
              linkToPage('/purchaseManage/purchasePlan')
            "
          >
            <img
              class="icon cursor-pointer"
              src="@/assets/imgs/home/onepass-icon.png"
              alt=""
            />
            <span>采购计划配置一码通</span>
            <img
              class="side-arrow"
              src="@/assets/imgs/home/sidearrow-icon.png"
              alt=""
            />
          </div>
          <div class="w-202px"></div>
          <div class="w-90px"></div>
          <div class="w-202px"></div>
          <div class="w-90px"></div>
        </div>
        <div class="flex items-center justify-around">
          <div
            class="text-center"
            @click="
              linkToPage('/purchaseManage/purchasePlan')
            "
          >
            <img
              class="icon cursor-pointer"
              src="@/assets/imgs/home/scancode-icon.png"
              alt=""
            />
            <span>司机扫码接单</span>
          </div>
          <img
            class="header-arrow"
            src="@/assets/imgs/home/headerarrow-icon.png"
            alt=""
          />
          <div
            class="text-center"
            @click="linkToPage('/salesManage/salesManage')"
          >
            <img
              class="icon cursor-pointer"
              src="@/assets/imgs/home/saleweigh-icon.png"
              alt=""
            />
            <span>销售自动过磅</span>
          </div>
          <img
            class="header-arrow"
            src="@/assets/imgs/home/headerarrow-icon.png"
            alt=""
          />
          <div
            class="text-center"
            @click="
              linkToPage('/purchaseManage/purchaseManage')
            "
          >
            <img
              class="icon cursor-pointer"
              src="@/assets/imgs/home/saleweigh-icon.png"
              alt=""
            />
            <span>采购自动过磅</span>
          </div>
        </div>
        <div class="qrcode">
          <img src="@/assets/imgs/home/qrcode.jpg" alt="" />
          <span>货主小程序</span>
        </div>
      </section>
    </div>
  </div>
  <AuthCodeDialog ref="authCodeDialogRef"></AuthCodeDialog>
</template>
<script setup lang="ts" name="Home">
import AuthCodeDialog from './authCodeDialog.vue'

const router = useRouter()
const authCodeDialogRef = ref()

const linkToPage = (path) => {
  router.push({ path: path })
}

const openCopyBoard = () => {
  authCodeDialogRef.value.open()
}
</script>
<style lang="scss" scoped>
.header {
  position: relative;
  height: 150px;
  padding: 0 180px 0 70px;
  background-color: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
}

.side {
  position: relative;
  padding: 40px 0 20px 0;
  min-width: 307px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
}

.main {
  width: 0;
  position: relative;
  padding: 40px 160px 40px 70px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
}

.title {
  position: absolute;
  left: 38px;
  top: -10px;
  height: 36px;
  width: 230px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  line-height: 36px;
  text-align: center;
  font-family: PingFang SC, PingFang SC-600;
  background: url('@/assets/imgs/home/title-bg.png')
    no-repeat;
  background-size: 100% 100%;
}

img.icon {
  min-width: 90px;
  height: 72px;
}

img.header-arrow {
  width: 160px;
  height: 18px;
}

img.side-arrow {
  width: 18px;
  height: auto;
}

img.short-arrow {
  width: auto;
  height: 18px;
}

img.connection-arrow {
  width: 430px;
  height: 84px;
  margin-left: 150px;
}

.qrcode {
  position: absolute;
  bottom: 30px;
  right: 30px;
  font-size: 16px;
  text-align: center;

  img {
    width: 107px;
    height: 107px;
  }
}

.help-box {
  display: flex;
  align-items: center;
  color: #e6a23c;
  margin: 0 0 20px 20px;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: #fcf6eb;
  img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
}
</style>
